<template>
	<!-- 基因家族 -->
	<view class="genefamily">
		<view class="genefamily_main">
			<view class="search_heads flex ali-c">
				<image class="searchiocn"  :src="photo_cdn+'zpupload/static/gene/searchiocn.png'" mode=""></image>
				<input  class="inputtags" placeholder="搜索基因家族"></input>
				<view class="sarch_btns">搜索</view>
			</view>
		</view>
		<view class="sieveseriesmask"  @tap="showselect" v-show="showsieveseries"></view>
		<view class="screenview flex ali-c jus-b">
			<view class="screenviewtext">基因家族是根据Y遗传标记的姓氏显著性而形成的家族，目前已有11407个基因家族</view>
			<view class="screenbtn flexc " @tap="showselect">
				<image class="primary" :src="photo_cdn+'zpupload/static/gene/primary.png'" mode=""></image>
				<text class="textname">筛选</text>
			</view>
			
			<!-- 筛选 -->
			<view class="sieveseries" v-show="showsieveseries">
				<view class="cate_select" v-for="(iteminfo,indexone) in selectmaxdata" :key="indexone">
					<view class="catename">{{iteminfo.lable}}</view>
					<view class="cate_lists">
						<view class="cate_items " @tap="selecttype(indexone,item)" :class="{actives:iteminfo.select_type_val==item.val}" v-for="(item,index) in iteminfo.select_data" :key="index" >{{item.name}}</view>
						
					</view>
				</view>
				
			</view>
		</view>
		
		
		
		<view class="familylists">
			<navigator url="/pages/gene/genefamilydetaile/genefamilydetaile" hover-class="none" class="familyitems" v-for="(item,index) in 5" :key="index" >
				<image class="rectanglebg" :src="photo_cdn + 'zpupload/static/gene/rectangle.png'" mode=""></image>
				<view class="familyitemsinfo">
					<view class="familynames">春秋北方大族</view>
					<view class="familylists_cell">
						<view class="familylists_cell_item flex ali-c">
							<view class="familylists_cell_name">家族星际：</view>
							<view>
								<uni-rate size="15" :readonly="true" :touchable="false" :value="5"  />
							</view>
						</view>
						<view class="familylists_cell_item flex ali-c">
							<view class="familylists_cell_name">遗传标记：</view>
							<view class="familylists_cell_val">C-MF3197</view>
						</view>
						<view class="familylists_cell_item flex ali-c">
							<view class="familylists_cell_name">形成时间：</view>
							<view class="familylists_cell_val">2590年前</view>
							
						</view>
					</view>
				</view>
			</navigator>
		</view>
		
		
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	export default {
		data(){
			return{
				photo_cdn,
				showsieveseries:false,
				selectmaxdata:[
					{
						key:"select_type_val_one",
						select_type_val:1,
						lable:"家族排序",
						select_data:[
							{name:"更新时间",val:1},
							{name:"形成时间由远至近",val:2},
							{name:"形成时间由近至远",val:3},
							{name:"人口占比由多到少",val:4},
							{name:"人口占比由少到多",val:5},
						],
					},
					{
						key:"select_type_val_two",
						select_type_val:1,
						lable:"类型排序",
						select_data:[
							{name:"不限类型",val:1},
							{name:"已完成",val:2},
							{name:"研究中",val:3},
						],
					},
					{
						key:"select_type_val_three",
						select_type_val:1,
						lable:"名人排序",
						select_data:[
							{name:"不限类型",val:1},
							{name:"有名人",val:2},
							{name:"无名人",val:3},
						],
					}
				],
				
			}
		},
		methods:{
			//选中类型
			selecttype(index,item){
				this.selectmaxdata[index].select_type_val = item.val;
			},
			//显示隐藏下拉
			showselect(){
				this.showsieveseries = !this.showsieveseries;
			}
		}
	}
</script>

<style lang="scss">
	@import "./genefamily.scss";
</style>